<!-- 过程检验单详情页面 -->
<template>
  <div class="app-container">
    <!-- 返回按钮 -->
    <el-page-header @back="goBack" :content="title" />
      
    <!-- 基本信息卡片 -->
    <el-card class="box-card" style="margin-top: 15px;">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <el-descriptions :column="3" border size="medium" v-loading="loading">
        <el-descriptions-item label="检验单编号">{{ ipqcInfo.ipqcCode }}</el-descriptions-item>
        <el-descriptions-item label="检验单名称">{{ ipqcInfo.ipqcName }}</el-descriptions-item>
        <el-descriptions-item label="检验单类型">
          <el-tag :type="getIpqcTypeTagType(ipqcInfo.ipqcType)">
            {{ formatIpqcType(ipqcInfo.ipqcType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="来源单据类型">
          <el-tag v-if="ipqcInfo.sourceDocType === '1'" type="primary">生产任务单</el-tag>
          <span v-else>{{ formatSourceDocType(ipqcInfo.sourceDocType) }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="来源单据编号">{{ ipqcInfo.sourceDocCode }}</el-descriptions-item>
        <el-descriptions-item label="工单编码">{{ ipqcInfo.workOrderCode }}</el-descriptions-item>
        <el-descriptions-item label="工单名称">{{ ipqcInfo.workOrderName }}</el-descriptions-item>
        <el-descriptions-item label="任务编号">{{ ipqcInfo.taskCode }}</el-descriptions-item>
        <el-descriptions-item label="工厂编号">{{ ipqcInfo.factoryCode }}</el-descriptions-item>
        <el-descriptions-item label="工厂名称">{{ ipqcInfo.factoryName }}</el-descriptions-item>
        <el-descriptions-item label="工序编码">{{ ipqcInfo.processCode }}</el-descriptions-item>
        <el-descriptions-item label="产品编码">{{ ipqcInfo.productCode }}</el-descriptions-item>
        <el-descriptions-item label="产品名称">{{ ipqcInfo.productName }}</el-descriptions-item>
        <el-descriptions-item label="规格型号">{{ ipqcInfo.productSfn }}</el-descriptions-item>
        <el-descriptions-item label="单位">{{ ipqcInfo.unit }}</el-descriptions-item>
        <el-descriptions-item label="检测数量">{{ ipqcInfo.quantityCheckNum }}</el-descriptions-item>
        <el-descriptions-item label="不合格数">{{ ipqcInfo.quantityUnqualifiedNum }}</el-descriptions-item>
        <el-descriptions-item label="合格数量">{{ ipqcInfo.quantityQualifiedNum }}</el-descriptions-item>
        <el-descriptions-item label="检测结果">
          <el-tag type="success" v-if="ipqcInfo.checkResult === '1'">合格</el-tag>
          <el-tag type="danger" v-else-if="ipqcInfo.checkResult === '2'">不合格</el-tag>
          <el-tag type="warning" v-else-if="ipqcInfo.checkResult === '3'">待检</el-tag>
          <span v-else>{{ ipqcInfo.checkResult }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="检测日期">{{ parseTime(ipqcInfo.inspectDate) }}</el-descriptions-item>
        <el-descriptions-item label="单据状态">
          <el-tag v-if="ipqcInfo.status === '1'">草稿</el-tag>
          <el-tag type="info" v-else-if="ipqcInfo.status === '2'">已提交</el-tag>
          <el-tag type="success" v-else-if="ipqcInfo.status === '3'">已审核</el-tag>
          <span v-else>{{ ipqcInfo.status }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="创建人">{{ ipqcInfo.createBy }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ parseTime(ipqcInfo.createTime) }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ ipqcInfo.remark }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    
    <!-- 检测明细卡片 -->
    <el-card class="box-card" style="margin-top: 15px;">
      <div slot="header" class="clearfix">
        <span>检测明细</span>
      </div>
      <el-table 
        v-loading="lineLoading" 
        :data="lineList" 
        style="width: 100%"
        border>
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="检测项编码" align="center" prop="indexCode" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="检测项名称" align="center" prop="indexName" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="检测项类型" align="center" prop="indexType" min-width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.indexType === '1'" type="info">外观</el-tag>
            <el-tag v-else-if="scope.row.indexType === '2'" type="success">视觉</el-tag>
            <el-tag v-else-if="scope.row.indexType === '3'" type="warning">尺寸</el-tag>
            <el-tag v-else-if="scope.row.indexType === '4'" type="primary">物理性能检测</el-tag>
            <el-tag v-else-if="scope.row.indexType === '5'" type="danger">化学成分检测</el-tag>
            <span v-else>{{ scope.row.indexType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标准值" align="center" prop="standerVal" min-width="100" />
        <el-table-column label="检测要求" align="center" prop="checkMethod" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column label="检测工具" align="center" prop="qcTool" min-width="120" :show-overflow-tooltip="true" />
        <el-table-column label="误差上限" align="center" prop="thresholdMax" min-width="80" />
        <el-table-column label="误差下限" align="center" prop="thresholdMin" min-width="80" />
        <el-table-column label="单位" align="center" prop="unit" min-width="80" />
        <el-table-column label="备注" prop="remark" align="center" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getIpqc, getQcIpqcLineList } from "@/api/qc/ProcesInspection";
import { parseTime } from "@/utils/ruoyi";

export default {
  name: "IpqcDetail",
  data() {
    return {
      // 标题
      title: "过程检验单详情",
      // 过程检验单ID
      ipqcId: null,
      // 过程检验单信息
      ipqcInfo: {},
      // 检测明细列表
      lineList: [],
      // 加载状态
      loading: false,
      // 明细加载状态
      lineLoading: false,
      // 请求锁，防止重复提交
      isRequesting: false
    };
  },
  created() {
    // 从路由参数获取过程检验单ID
    const ipqcId = this.$route.params.id;
    console.log("路由参数中的ID:", ipqcId);
    console.log("路由参数类型:", typeof ipqcId);
    if (ipqcId) {
      // 确保ipqcId是数字类型
      this.ipqcId = parseInt(ipqcId);
      console.log("设置ipqcId:", this.ipqcId);
      console.log("设置ipqcId类型:", typeof this.ipqcId);
      this.getIpqcInfo();
      // 只在created中获取明细数据，不再在多处调用
      this.getLineList();
    } else {
      this.$message.error("未找到过程检验单ID，无法加载详情");
      this.goBack();
    }
  },
  mounted() {
    // 不再在mounted中重复调用API
    console.log("组件已挂载，检查数据状态");
  },
  watch: {
    // 监听路由参数变化
    '$route.params.id': {
      handler(newVal) {
        console.log("路由参数ID变化:", newVal);
        // 只有在ID确实改变且不为空的情况下才重新获取数据
        if (newVal && newVal !== this.ipqcId) {
          this.ipqcId = parseInt(newVal);
          // 重置数据
          this.lineList = [];
          // 重新获取数据
          this.getIpqcInfo();
          this.getLineList();
        }
      },
      immediate: false // 不需要立即执行，因为created中已经处理了初始化
    }
  },
  methods: {
    /** 返回列表页 */
    goBack() {
      this.$router.push("/qc/ProcesInspection");
    },
    /** 获取过程检验单信息 */
    getIpqcInfo() {
      this.loading = true;
      getIpqc(this.ipqcId)
        .then(response => {
          this.ipqcInfo = response.data || {};
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /** 获取检测明细列表 */
    getLineList() {
      if (!this.ipqcId) {
        console.error("无法获取检测明细，ipqcId为空");
        return;
      }
          
      // 防止重复请求
      if (this.isRequesting) {
        console.log("请求正在进行中，跳过重复请求");
        return;
      }
      
      console.log("开始获取检测明细列表, ipqcId:", this.ipqcId);
      console.log("传递的参数对象:", { ipqcId: this.ipqcId });
      this.lineLoading = true;
      this.isRequesting = true; // 设置请求锁
      
      // 确保参数名称与后端实体类字段名完全一致
      const params = { ipqcId: this.ipqcId };
      console.log("最终传递的参数:", params);
      console.log("参数JSON字符串:", JSON.stringify(params));
      getQcIpqcLineList(this.ipqcId, params)
        .then(response => {
          console.log("检测明细列表响应:", response);
          if (response && response.code === 200) {
            if (response.rows && Array.isArray(response.rows)) {
              this.lineList = response.rows;
              console.log("成功设置检测明细数据(rows):", this.lineList.length, "条记录");
            } else if (response.data && Array.isArray(response.data)) {
              this.lineList = response.data;
              console.log("成功设置检测明细数据(data):", this.lineList.length, "条记录");
            } else {
              console.warn("响应中没有有效的数组数据");
              this.lineList = [];
            }
          } else {
            console.warn("响应状态码异常:", response.code);
            this.lineList = [];
            this.$message.warning(`获取检测明细数据异常: ${response.msg || '未知错误'}`);
          }
        })
        .catch(error => {
          console.error("获取检测明细列表失败:", error);
          this.lineList = [];
          // 如果是重复提交错误，不显示错误消息给用户
          if (error && error.message && error.message.includes("数据正在处理，请勿重复提交")) {
            console.warn("检测到重复提交，忽略此错误");
          } else {
            this.$message.error("获取检测明细列表失败: " + (error.message || '未知错误'));
          }
        })
        .finally(() => {
          this.lineLoading = false;
          // 延迟释放请求锁，避免快速连续调用
          setTimeout(() => {
            this.isRequesting = false;
          }, 200);
        });
    },
    // 格式化方法
    formatSourceDocType(type) {
      const map = {
        '1': '生产任务单',
        '2': '来料货检验单',
        '3': '过程检验单',
        '4': '退料检验单'
      }
      return map[type] || type
    },
    
    formatIpqcType(type) {
      const map = {
        '1': '来料检验',
        '2': '出货检验',
        '3': '过程检验',
        '4': '退料检验'
      }
      return map[type] || type
    },

    getIpqcTypeTagType(type) {
      const map = {
        '1': 'info',
        '2': 'success',
        '3': 'primary',
        '4': 'warning'
      }
      return map[type] || ''
    }
  }
};
</script>

<style scoped>
.el-tag {
  padding: 2px 8px;
}
.el-descriptions {
  margin: 10px 0;
}
</style> 